<template>
    <div>
      <section class="coursePage">
          <section class="courseWrap">
              <header class="courseHeader">
                  <div class="courseTitle">{{couname}}</div>
                  <div>
                      <div v-show="coursewarelist.length>0 && activeClass === (coursewarelist.length-1)" class="interactBtn" @click="interaction">{{interacttext}}</div>
                      <div class="endBtn" @click="goBack">
                          <!-- <i class="iconfont arrow-left">&#xe61f;</i> -->
                          <span>返回首页</span>
                      </div>
                  </div>
              </header>
              <section class="courseCards">
                  <!-- 左侧导航栏 -->
                  <nav class="courseNav">
                      <p class="navHeader">课件内容</p>
                      <section class="navList">
                          <ul>
                            <template v-for="(item,index) in coursewarelist">
                              <li :class="activeClass == index ?'slideNav active':'slideNav'" :key="item.cwid" @click="changeClass(index)">
                                    <p class="sliderOrder">{{ item.num }}</p>
                                    <p class="sliderTitle">{{ item.name }}</p>
                                </li>
                              </template>
                          </ul>
                      </section>
                  </nav>
                  <!-- 右侧课程内容 -->
                  <section class="sliderInfo">
                      <section class="slideCmp">
                          <!-- 图片 -->
                          <img v-show="filetype === 'image'" :src="imgpath" alt="">
                          <!-- 视频 -->
                          <d-player v-show="filetype === 'video'" :options="options" style="height: 100%;"
                                    @play="play"
                                    ref="player">
                          </d-player>
                          <!-- pdf -->
                          <div class="playInfo" v-show="filetype === 'pdf'" style="height: 100%;">
                              <embed width="100%" height="100%" :src="pdfpath" type="">
                          </div>                         
                      </section>                    
                  </section>                
              </section>
          </section>
      </section>
    <!-- 二维码 -->
      <section class="scan">
          <div class="qcode">
              <!-- <img src="../../assets/web/qr.png" alt=""> -->
              <div id="qrcode" ref="qrcode"></div>
          </div>
          <div class="qcode-desc">
              <img src="../../assets/web/sc.png" alt="">
              <p class="scTest">扫一扫</p>
          </div>
      </section>

        <!-- 上一章、下一章按钮 -->
      <section class="actions__wrap">
          <section class="actions__guide">
              <i class="iconfont arrow-up">&#xe76d;</i>
          </section>
          <section class="lesson__actions collapse__actions">
              <section class="actions__right">
                  <div class="lastChapter" @click="last()">上一章</div>
                  <div class="nextChapter" @click="next()">下一章</div>
              </section>
          </section>
      </section>
 
       
    </div>
</template>

<script>
import dPlayer from "vue-dplayer";
import "vue-dplayer/dist/vue-dplayer.css";
import QRCode from "qrcodejs2";
export default {
  components: {
    dPlayer
  },
  data() {
    return {
      name: "in-video",
      options: {
        video: {
          url: "http://222.190.113.220:8087/Upload/20190402165732711.mp4",
          pic:
            "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg"
        },
        autoplay: false,
        contextmenu: [
          {
            text: "GitHub",
            link: "https://github.com/MoePlayer/vue-dplayer"
          }
        ]
      },
      player: null,
      dtid: this.$store.state.dtid,
      couid: null,
      couname: "",
      activeClass: -1,
      coursewarelist: [],
      filetype: "",
      imgpath: "",
      pdfpath: "",
      interacttext: "开始互动"
    };
  },
  mounted() {
    this.player = this.$refs.player.dp;
    this.couid = this.$route.query.couid;
    this.couname = this.$route.query.couname;
    this.getList();
    this.qrCode = new QRCode("qrcode", {
      width: 150, //二维码宽度，单位像素
      height: 150, //二维码高度，单位像素
      text: this.$store.state.httpapp+"?dtid=" + this.dtid, //二维码中的内容
      colorDark: "#000000", //前景色
      colorLight: "#ffffff", //背景色
      correctLevel: QRCode.CorrectLevel.H //容错级别，
    });
  },
  watch: {
    activeClass: function(curVal, oldVal) {
      // console.log("curVal:" + curVal + ",oldVal:" + oldVal);
      var item = this.coursewarelist[curVal];
      if (item.type == "视频") {
        this.filetype = "video";
        this.player.switchVideo({
          url: this.$store.state.respath + item.url
        });
      } else if (item.type == "图片") {
        this.filetype = "image";
        this.imgpath = this.$store.state.respath + item.url;
      } else if (item.type == "pdf") {
        this.filetype = "pdf";
        this.pdfpath = this.$store.state.respath + item.url;
        // this.pdfpath = "../../../static/20191127152043.pdf";
      }
      if (curVal == this.coursewarelist.length - 1) {
        this.getClassStatus();
      }
    }
  },
  methods: {
    play() {
      // console.log("play callback");
    },
    changeClass(index) {
      this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
    },
    getClassStatus() {
      // console.log(this.couid);
      this.$axios
        .get("/Classroom/V3", {
          params: {
            dtid: this.dtid,
            couid: this.couid
          }
        })
        .then(json => {
          this.interacttext =
            json.data.Cr_Flag === 1 ? "互动进行中" : "开始互动";
        })
        .catch(error => {});
    },
    last() {
      var index = this.activeClass - 1;
      if (index < 0) {
        this.$message({
          type: "info",
          message: "已经是第一个章节！"
        });
      } else {
        this.activeClass = index;
      }
    },
    next() {
      var index = this.activeClass + 1;
      if (index >= this.coursewarelist.length) {
        this.$message({
          type: "info",
          message: "已经是最后一个章节！"
        });
      } else {
        this.activeClass = index;
      }
    },
    getList() {
      this.$axios
        .get("/Course/" + this.couid + "/V11")
        .then(json => {
          var chaptList = json.data;
          // console.log(chaptList.length);
          if (chaptList.length > 0) {
            var chaptlistdata = [];
            for (let i = 0; i < chaptList.length; i++) {
              var item = {
                num: i + 1,
                cwid: chaptList[i].Cw_Id,
                name: chaptList[i].Cw_Name,
                url: chaptList[i].Cw_Url,
                type: chaptList[i].Cw_type
              };
              chaptlistdata[i] = item;
            }
            this.coursewarelist = chaptlistdata;
            this.activeClass = 0;
          }
        })
        .catch(error => {});
    },
    interaction() {
      if (this.interacttext == "互动进行中") {
        this.$message({
          type: "info",
          message: "互动进行中!"
        });
      } else {
        this.$confirm(
          "开始互动后其他课程的互动将停止，确定要开始互动吗?",
          "提示"
        ).then(() => {
          var classroom = {
            Cos_ID: this.couid
          };
          this.$axios
            .put("/Classroom/" + this.dtid + "/V2", classroom)
            .then(json => {
              if (json.data == "success") {
                this.$message({
                  type: "success",
                  message: "课堂互动已开启！"
                });
                this.interacttext = "互动进行中";
              } else {
                this.$message({
                  type: "error",
                  message: "课堂互动开启失败！"
                });
              }
            })
            .catch(error => {});
        });
      }
    },
    goBack() {
      this.$router.push("selectCourse/course");
    }
  }
};
</script>

<style scoped>
.coursePage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(
    circle at 100% 100%,
    #0d1f39,
    #224372 80%,
    #284d83 100%
  );
  z-index: 0;
}
.courseWrap {
  position: fixed;
  top: 5px;
  left: 24px;
  width: calc(100vw - 48px);
  height: calc(100vh - 30px);
  min-width: 800px;
  min-height: 500px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column;
  flex-flow: column;
  /* border:1px solid red; */
}
.courseHeader {
  height: 40px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-line-pack: center;
  align-items: center;
  /* border:1px solid blue; */
}
.courseTitle {
  color: white;
  font-size: 16px;
  line-height: 40px;
}
.endBtn {
  padding: 0 10px;
  height: 30px;
  border: 1px solid #41aaf8;
  border-radius: 4px;
  border-color: #41aaf8;
  color: #41aaf8;
  line-height: 30px;
  cursor: pointer;
}
.endBtn,
.interactBtn {
  display: inline-block;
}
.interactBtn {
  padding: 0 10px;
  height: 30px;
  border: 1px solid rgb(0, 255, 85);
  border-radius: 4px;
  border-color: rgb(0, 255, 85);
  color: rgb(0, 255, 85);
  line-height: 30px;
  cursor: pointer;
  margin-right: 50px;
}
@font-face {
  font-family: "iconfont"; /* project id 1514769 */
  src: url("//at.alicdn.com/t/font_1514769_4d1gtdrsdfv.eot");
  src: url("//at.alicdn.com/t/font_1514769_4d1gtdrsdfv.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1514769_4d1gtdrsdfv.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1514769_4d1gtdrsdfv.woff") format("woff"),
    url("//at.alicdn.com/t/font_1514769_4d1gtdrsdfv.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1514769_4d1gtdrsdfv.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 18px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: top;
  padding-right: 5px;
}
.courseCards {
  -ms-flex: 1;
  flex: 1;
  height: calc(100vh - 50px);
  max-height: calc(100vh - 50px);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  background: #fff;
  /* border:1px solid green; */
}
.courseNav {
  width: 190px;
  height: 100%;
  padding: 0 0 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column;
  flex-flow: column;
  overflow: hidden;
}
.navHeader {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  font-size: 14px;
}
.navList {
  -ms-flex: 1;
  flex: 1;
  overflow-y: auto;
  border-right: 1px solid #ddd;
}
.slideNav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
}
.active {
  background: #5096f5;
  color: white;
}
ul,
li,
p {
  padding: 0;
  margin: 0;
}
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #ddd;
}
::-webkit-scrollbar-track {
  border-radius: 3px;
  background: #fff;
}
.sliderOrder {
  width: 20px;
  text-align: left;
}
.sliderTitle {
  width: 140px;
}
.sliderInfo {
  position: relative;
  -ms-flex: 1;
  flex: 1;
  max-width: calc(100% - 190px);
  height: 100%;
  padding: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  background: #f5f5f5;
  /* border:1px solid cyan; */
  box-sizing: border-box;
}
.slideCmp {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  /* border: 1px solid tomato; */
}
.slideCmp img {
  width: 100%;
  height: 100%;
}
.scan {
  position: absolute;
  right: 0;
  top: 160px;
  /* width: 126px; */
  color: #fff;
}
.qcode-desc {
  /* margin: 0 auto; */
  width: 48px;
  text-align: center;
  font-size: 10px;
  background: white;
  color: black;
  cursor: pointer;
}
.qcode-desc img {
  margin-top: 5px;
}
.qcode {
  position: relative; /* margin-bottom: 15px; */
  padding: 10px;
  text-align: center;
  background: #fff;
  color: #000;
  font-size: 10px;
  border-radius: 2px;
  display: none;
}
.qcdoe:after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 55px;
  display: block;
  border: 9px solid transparent;
  border-top-color: #fff;
}
.qcode img {
  display: block;
  margin: auto;
  width: 150px;
  height: 150px;
}
.scan:hover .qcode {
  display: block;
}
.scan:hover .qcode-desc {
  display: none;
}
.actions__wrap {
  position: fixed;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 40px;
  outline: none;
}
.actions__wrap .actions__guide {
  z-index: 0;
  opacity: 1;
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
  width: 88px;
  height: 20px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  transition: opacity 5.5s ease-in 4.5s;
}
.arrow-up {
  font-size: 24px;
  color: #c8c8c8;
}
.lesson__actions {
  /* opacity:0; */
  display: none;
  z-index: 1;
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* border:1px solid blue; */
  color: #c8c8c8;
  font-size: 16px;
  bottom: 26px;
  margin: 0 auto;
  width: 460px;
  line-height: 48px;
}
.actions__wrap:hover .lesson__actions {
  display: block;
}
.actions__wrap:hover .actions__guide {
  display: none;
}
.lastChapter {
  float: left;
  cursor: pointer;
}
.nextChapter {
  float: right;
  cursor: pointer;
}
.actions__right {
  font-size: 20px;
  font-weight: 600;
  padding: 0 85px;
}
.scTest {
  margin: 0;
  padding: 0;
  font-size: 13px;
}
</style>
